You can use the ::after pseudo-element to create decorative underlines, highlights, or other visual effects beneath text. By styling ::after with position, width, height, and background-color, you can achieve custom designs without extra HTML elements.

Key Points

1
Set position: relative on the parent element so the pseudo-element can be positioned absolutely relative to it.
2
Use ::after with content: '' and position: absolute to create a visual element behind or below the text.
3
Adjust width, height, bottom, and left to control the size and position of the underline or highlight.
4
Use background-color or gradients to style the effect, and transitions for animated highlights.

Example: Custom Underline with ::after

In this example, the ::after pseudo-element creates a gold underline that animates from right to left when the paragraph is hovered. This technique allows custom decorative effects without additional HTML elements.

Best Practices

1
Use pseudo-elements for decorative underlines or highlights that do not require semantic HTML changes.
2
Combine with transitions or animations for interactive effects.
3
Adjust position and size carefully to avoid overlapping text or other elements.
4
Test across browsers to ensure consistent rendering, especially with scaling or transforms.

Difficulty: 6/10

Topics: pseudo-elements, CSS positioning, visual styling

Scenario Questions

0-2 years experience

1
How would you add a subtle yellow highlight behind a single line of text using ::after, ensuring it doesn't push other content around?
2
If you use ::after to create an underline but it's not showing up, what are the first three things you'd check?
3
You need a 2px bottom underline that starts 5px from the left edge of the text — how would you write the CSS?

2-5 years experience

1
A designer wants a dynamic underline that extends beyond the text width on hover — your implementation breaks when the text wraps. How do you fix it?
2
We're seeing flickering on mobile when hovering over links with ::after highlights. What could be causing it, and how would you debug it?
3
The underline works fine in Chrome but disappears in Safari — what’s likely wrong, and how do you make it cross-browser compatible?

5-8 years experience

1
You're building a reusable heading component with customizable underlines — how do you design the CSS to support multiple styles (dashed, wavy, color) without bloating the stylesheet or requiring JS?
2
In a high-traffic product, we're using ::after for visual feedback on 50+ interactive elements per page. Is this performant? What metrics would you monitor, and how would you optimize?
3
A legacy component uses inline styles and JS to draw underlines — you want to migrate to CSS ::after. What edge cases do you anticipate, and how do you ensure backward compatibility?

8+ years experience

1
We're standardizing visual feedback across 20+ products — how do you architect a design system for underlines/hover effects using ::after that scales across themes, languages, and accessibility requirements without becoming a maintenance nightmare?
2
A major redesign requires replacing all JS-based underlines with CSS ::after. How do you plan the migration, measure impact on performance and accessibility, and get buy-in from design and QA teams?
3
Your team’s underline component is now used in a CMS where users can inject arbitrary HTML. What security or layout risks does ::after introduce, and how do you harden the implementation?

Follow-up Questions

❓What happens if the text wraps to multiple lines?
❓How would you make this work with right-to-left languages?
❓Could this break if the parent has overflow: hidden?